import React, { Component, useState } from 'react';

// vue ref 可以用到组件也可以用到标签
// react中同样成立，但是注意函数式组件是没有实例的（如果子组件是函数式组件，不要轻易使用ref）
// 如果非要使用ref，也不是不可以，可以通过  React.forwardRef() 包裹函数式组件，该函数式组件的第一个参数为props，第二个参数为ref，在函数式组件的顶级标签上添加ref --- 转发refs
const Header = React.forwardRef((props, ref) => {
  const [count, setCount] = useState(10000)
  const fn = () => {
    setCount(count + 500)
  }
  return (
    <header ref = {ref}>header - { count }</header>
  )
})
class Content extends Component {
  state = {
    msg: 'hello msg'
  }
  render () {
    return (
      <div className="content">content</div>
    )
  }
} 
// 非严格模式，ref可以设置为字符串
// 严格模式下，需要使用 createRef / useRef
export default class App extends Component {
  btnRef = React.createRef()
  headerRef = React.createRef() 
  contentRef = React.createRef()
  render() {
    return (
      <>
        <button ref = { this.btnRef }>按钮</button>
        <Header ref = { this.headerRef }/>
        <Content ref = { this.contentRef }/>

        <button onClick = {() => {
          // console.log(this.btnRef.current)
          console.log(this.headerRef.current)
          console.log(this.contentRef.current.state.msg)
          this.btnRef.current.style.color = 'red'
          this.headerRef.current.style.color = 'green'

        }}>获取子组件以及dom节点</button>
      </>
    );
  }
}
